import './App.css'
import { Flex, Layout, Menu } from 'antd';
import {useNavigate,Outlet} from 'react-router-dom'
const { Header, Sider, Content } = Layout;
function App() {
  const headerStyle = {
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#4096ff',
  };
  const contentStyle = {
    height:'calc( 100vh - 64px )',
    color: '#fff',
    backgroundColor: '#0958d9',
  };
  const siderStyle = {
    height:'calc( 100vh -64px )',
    color: '#fff',
    backgroundColor: '#1677ff',
  };
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
  };
  const navigate = useNavigate()
  const items=[
    {
      key:'/app/jichudangan',
      label:'基础档案',
      children:[
        {
          key:'/app/cangkucunhuo',
          label:'仓库存货',
          children:[
            {
              key:'/app/cangkushezhi',
              label:'仓库设置',
            },
          ]
        }
      ]
    }
  ]
  const onClick = (e) => {
    navigate(e.key)
  }
  return (
    <div>
      <Layout style={layoutStyle}>
      <Header style={headerStyle}>
        <h1>云端梦想</h1>
      </Header>
      <Layout>
        <Sider width="15%" style={siderStyle}>
          <Menu
            onClick={onClick}
            style={{
              width:230,
            }}
            mode='vertical'
            items={items}
          >
          </Menu>
        </Sider>
        <Content style={contentStyle}><Outlet></Outlet></Content>
      </Layout>
    </Layout>
    </div>
  )
}

export default App
